<template>
<<<<<<< HEAD
  <div>
    <div v-if="total == 0 && isLoad" class="d-flex justify-center align-center">
      <div>
        <v-alert class="ma-5" dense outlined type="error"
          >抱歉，你搜索的文章标题不存在！</v-alert
        >
      </div>
    </div>
    <v-col>
      <v-card
        class="ma-3"
        v-for="item in artList"
        :key="item.id"
        link
        :to="{ path: '/article/detail/' + item.ID }"
      >
        <!-- @click="$router.push(`/article/detail/${item.ID}`)" -->

        <v-row no-gutters class="d-flex align-center">
          <v-col class="d-flex justify-center align-center ma-3" cols="1">
            <v-img max-height="100" max-width="100" :src="item.img"></v-img>
          </v-col>
          <v-col>
            <v-card-title>
              <v-chip
                color="green darken-2"
                outlined
                label
                class="mr-3 white--text"
                >{{ item.Category.name }}</v-chip
              >
              <div>{{ item.title }}</div>
            </v-card-title>
            <v-card-subtitle class="mt-1" v-text="item.desc"></v-card-subtitle>
            <v-divider class="mx-4"></v-divider>
            <v-card-text class="d-flex align-center">
              <div class="d-flex align-center">
                <v-icon class="mr-1" small>{{ "mdi-calendar-month" }}</v-icon>
                <span>{{
                  item.CreatedAt | dateformat("YYYY-MM-DD HH:MM")
                }}</span>
              </div>
              <div class="mx-4 d-flex align-center">
                <v-icon class="mr-1" small>{{ "mdi-comment" }}</v-icon>
                <span>{{ item.comment_count }}</span>
              </div>
              <div class="mx-1 d-flex align-center">
                <v-icon class="mr-1" small>{{ "mdi-eye" }}</v-icon>
                <span>{{ item.read_count }}</span>
              </div>
            </v-card-text>
          </v-col>
        </v-row>
      </v-card>
      <div class="text-center">
        <v-pagination
          total-visible="7"
          v-model="queryParam.pagenum"
          :length="Math.ceil(total / queryParam.pagesize)"
          @input="getArtList()"
        ></v-pagination>
      </div>
    </v-col>
  </div>
</template>
<script>
export default {
  // props: ['title'],
  data() {
    return {
      artList: [],
      queryParam: {
        pagesize: 5,
        pagenum: 1,
      },
      total: 0,
      isLoad: false,
    };
  },

  async asyncData({ app, params, store }) {
    const asyncData = {};
    asyncData.queryParam = {};
    asyncData.title = params.title;
    asyncData.queryParam.pagesize = 5;
    asyncData.queryParam.pagenum = 1;

    //getArtList
    const { data: res } = await app.$axios.get(`article`, {
      params: {
        title: asyncData.title,
        pagesize: asyncData.queryParam.pagesize,
        pagenum: asyncData.queryParam.pagenum,
      },
    });

    asyncData.artList = res.data;
    asyncData.total = res.total;
    asyncData.isLoad = true;

    asyncData.profileInfo = {};
    asyncData.profileInfo.id = 1;
    //导航栏
    const { data: res_cate } = await app.$axios.get("category");
    let cateList = res_cate.data;
    store.commit("add_cateList", cateList);

    //获取个人配置信息
    const { data: res_profileInfo } = await app.$axios.get(
      `profile/${asyncData.profileInfo.id}`
    );
    // this.$root.$emit('msg', res.data.icp_record)
    store.commit("save", res_profileInfo.data.icp_record);
    store.commit("save_profileInfo", res_profileInfo.data);

    //head
    app.head.title = "博文搜索";

    // <meta name="keywords" content="js数组添加数据">
    // <meta name="description" content="js中对于数组的操作很常见，下面记录一下js向数组添加元素的方法。    let myArray=[11,22,33];    console.log(原数组：,myArray);    myArray.push(44,55);    console.log(用push在数组后面插入元素：,myArray);    myArray.unshift(66,77);    co..._js数组添加数据">
    // <meta name="csdn-baidu-search" content="{&quot;autorun&quot;:true,&quot;install&quot;:true,&quot;keyword&quot;:&quot;js数组添加数据&quot;}">
    function in_array(search, array) {
      for (var i in array) {
        if (array[i] == search) {
          return true;
        }
      }
      return false;
    }

    Array.prototype.contains = function contains(obj) {
      var i = this.length;
      let del_ids = [];
      while (i--) {
        if (in_array(this[i].name, obj)) {
          del_ids.push(i);
        }
      }
      return del_ids;
    };

    let del_metads = app.head.meta.contains([
      "lsblog-baidu-search",
      "keywords",
      "description",
    ]);

    del_metads.forEach((element) => {
      app.head.meta.splice(element, 1);
    });

    app.head.meta.push(
      {
        name: "lsblog-baidu-search",
        content:
          '{"autorun":true,"install":true,"keyword":"giteaForBT宝塔插件"}',
      }
      // {
      //   hid: "keywords",
      //   name: "keywords",
      //   content: response.data.result.content.match(/.\[TOC\]\((.*?)\)/)[1]
      // }, {
      //   hid: "description",
      //   name: "description",
      //   content: response.data.result.content.match(/.\[TOC\]\((.*?)\)/)[1]
      // }
    );

    return asyncData;
  },
  created() {
    // this.getArtList()
  },
  methods: {
    // 获取文章列表
    async getArtList() {
      const { data: res } = await this.$http.get(`article`, {
        params: {
          title: this.title,
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum,
        },
      });

      this.artList = res.data;
      this.total = res.total;
      this.isLoad = true;
    },
  },
};
</script>
<style lang="">
</style>
=======
 <nuxt-child  :key="1"></nuxt-child>
</template>
>>>>>>> dev
